import { Form, Select, Progress } from "antd";
import Input from "antd/lib/input/Input";
import { useEffect, useState } from "react";
import CardColor from '@/components/Card/cardColor'
import Card from '@/components/Card/card'
import DescCard from '@/components/Card/desc'
import './index.less'
import MyEchartsCom from '@/components/myEcharts';
const { Option } = Select;
export default (props) => {
    let { blockTypeValue, sourceTypeValue } = props;
    const [option, setoption] = useState({})
    const blockTypeValueObj = {
        1: '卡片',
        2: '图表',
        3: '进度',
        4: '带周期图表',
    }
    const echartsTypeValueObj = {
        'line': '折线图',
        'bar': '柱状图',
        'pie': '饼图',
    }
    const cardTypeValueObj = {
        '1': '样式1',
        '2': '样式2',
        '3': '样式3',
        '4': '样式4',
    }
    useEffect(() => {
        if (Object.keys(props.conf).length == 0) {
            let optionn = {}


            switch (props.blockTypeValue) {
                case '1':
                    optionn = {
                        type: 'card2', // pc卡片1  pc卡片2  pc卡片3  pc卡片4  
                        col: 12, //默认宽度
                        blockTypeValue: props.blockTypeValue,
                        sourceTypeValue: props.sourceTypeValue
                    }
                    break;
                case '2':
                case '4':
                    optionn = {
                        type: 'line',//
                        col: 12, //默认宽度
                        blockTypeValue: props.blockTypeValue,
                        sourceTypeValue: props.sourceTypeValue
                    }
                    break;
                case '3':
                    optionn = {
                        type: 'progress',//
                        col: 12, //默认宽度
                        blockTypeValue: props.blockTypeValue,
                        sourceTypeValue: props.sourceTypeValue
                    }
                    break;
                default:
                    break;
            }
            setoption(optionn);
            props.settypeOption(optionn)
        } else {
            setoption(props.conf)
        }
    }, [props.conf])
    let testData = {
        m_title: '指标名称',
        m_value: '10000',
        m_unit: '户'
    }

    const initChart = () => {
        return {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                },
                {
                    data: [2, 30, 324, 118, 165, 187, 330],
                    type: 'line'
                }
            ]
        }
    }
    const initChart1 = () => {
        return {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar'
                },
                {
                    data: [2, 30, 324, 118, 165, 187, 330],
                    type: 'bar'
                }
            ]
        }
    }
    const initChart2 = () => {
        return {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '类型1' },
                        { value: 735, name: '类型2' },
                        { value: 580, name: '类型3' },
                        { value: 484, name: '类型4' },
                        { value: 300, name: '类型5' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    }
    //
    return <div>
        {/* <div>{sourceTypeValue}</div> */}

        {
            blockTypeValue == 1 && <div>
                <Form layout="inline">

                    <Form.Item label="卡片样式" >
                        <Select
                            style={{ width: 120 }}
                            value={option?.type}
                            onChange={(value) => {
                                props.settypeOption({ ...option, type: value })
                            }}
                        >

                            <Option value="card1">卡片1</Option>
                            <Option value="card2">卡片2</Option>
                            <Option value="card3">卡片3</Option>
                            <Option value="card4">卡片4</Option>
                            {
                                props.sourceTypeValue == 'WEB' && <Option value="card5">卡片5</Option>
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="宽度(1-24)">
                        <Input value={option?.col} style={{ width: 120 }} onChange={(e) => { props.settypeOption({ ...option, col: e.target.value }) }} />
                    </Form.Item>

                </Form>
                <div className="indexWrap">
                    {
                        option?.type == 'card1' && <Card title='指标名称' mainInfo={testData}
                            subinfo={testData}
                            subinfoother={testData} />
                    }
                    {
                        option?.type == 'card2' && <div className="otherWrap" style={{ width: '300px' }}>
                            <DescCard title='指标名称' mainInfo={testData} />
                        </div>
                    }
                    {
                        option?.type == 'card3' && <div style={{ width: '300px' }}>
                            <DescCard type='2' title='指标名称' mainInfo={testData} />
                        </div>
                    }
                    {
                        option?.type == 'card4' && <div style={{ width: '200px' }} className="CardlabelItemWrap">
                            <div className="CardlabelItem">
                                <div className="cardlabel">指标名称</div>
                                <div className="cardvalue">10,000户</div>
                            </div>
                            <div className="CardlabelItem">
                                <div className="cardlabel">指标</div>
                                <div className="cardvalue">10,000户</div>
                            </div>
                        </div>
                    }

                </div>

            </div>
        }

        {
            (blockTypeValue == 2 || blockTypeValue == 4) && <div>

                <Form layout="inline">

                    <Form.Item label="图表类型" style={{ display: 'none' }}>
                        <Select
                            style={{ width: 120 }}
                            value={option?.type}
                            onChange={(value) => {
                                props.settypeOption({ ...option, type: value })
                            }}
                        >
                            {
                                Object.keys(echartsTypeValueObj).map((item, index) => {
                                    return <Option value={item} key={index}>{echartsTypeValueObj[item]}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="宽度(1-24)">
                        <Input value={option?.col} style={{ width: 120 }} onChange={(e) => { props.settypeOption({ ...option, col: e.target.value }) }} />
                    </Form.Item>
                </Form>
                <div className="indexWrap">
                    {
                        option?.type == 'line' && <div className="otherWrap" >
                            <MyEchartsCom option={initChart()} title='图表标题' style={{ width: '100%', height: '300px' }} />
                        </div>
                    }

                    {
                        option?.type == 'bar' && <div className="otherWrap" >
                            <MyEchartsCom option={initChart1()} title='图表标题' style={{ width: '100%', height: '300px' }} />
                        </div>
                    }
                    {
                        option?.type == 'pie' && <div className="otherWrap" >
                            <MyEchartsCom option={initChart2()} title='图表标题' style={{ width: '100%', height: '300px' }} />
                        </div>
                    }
                </div>

            </div>
        }

        {
            blockTypeValue == 3 && <div>
                <Form layout="inline">
                    <Form.Item label="宽度(1-24)">
                        <Input value={option?.col} style={{ width: 120 }} onChange={(e) => { props.settypeOption({ ...option, col: e.target.value }) }} />
                    </Form.Item>
                </Form>
                <div className="indexWrap">
                    <div className="progressWrap">
                        <Progress type="circle" percent={75} />
                        <div style={{ textAlign: 'center' }}>指标名称</div>
                    </div>
                </div>
            </div>
        }
    </div>;
}